<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket Demo</title>
</head>
<body>
<h1>WebSocket Demo</h1>
<div>
  <input type="text" id="messageInput" placeholder="输入消息..." />
  <button id="sendButton">发送消息</button>
</div>
<div id="messages"></div>

<script>
  // 确保根据你的实际应用配置 WebSocket URL
  const sid = '1'; // 替换为实际的 sid
  const ws = new WebSocket("ws://localhost:8121/api/webSocket");

  ws.onopen = function() {
    console.log("连接已建立！");
  };

  ws.onmessage = function(event) {
    const messageDiv = document.getElementById("messages");
    messageDiv.innerHTML += `<p>${event.data}</p>`;
  };

  ws.onclose = function() {
    console.log("连接已关闭！");
  };

  ws.onerror = function(error) {
    console.error("WebSocket 错误：", error);
  };

  document.getElementById("sendButton").onclick = function() {
    const messageInput = document.getElementById("messageInput");
    const message = messageInput.value;
    if (message) {
      ws.send(message);
      messageInput.value = ''; // 清空输入框
    }
  };
</script>
</body>
</html>